<template>
	<view class="index">
		<mescroll-uni height="100%" @init="mescrollInit" @down="refresh" @up="load" :up="upOption" :down="downOption">
			<view class="total-fund-wrapper">
				<view class="bank-wrapper" @click="goBank" v-if="amountInfo && amountInfo.account">
					<text>{{ amountInfo.account.panBank }}</text>
					<uni-icons type="right" color="#ffffff" size="18"></uni-icons>
				</view>
				<view class="bank-wrapper" @click="goBank" v-else>
					<text>尚未绑定收款账号</text>
					<uni-icons type="right" color="#ffffff" size="18"></uni-icons>
				</view>
				<view class="total-fund">
					<view class="label">
						总余额
					</view>
					<view class="fund">
						￥{{ amountInfo.balance || 0 }}
					</view>
				</view>
				<view class="fund-wrapper">
					<view class="item">
						<view class="label">
							待结算
						</view>
						<view class="fund">
							￥{{ amountInfo.settlementAmount || 0 }}
						</view>
					</view>
					<view class="item">
						<view class="label">
							<text>可提现</text>
							<view class="withdraw" @click="withdraw">
								提现
							</view>
						</view>
						<view class="fund">
							￥{{ amountInfo.withdrawableAmount || 0 }}
						</view>
					</view>
				</view>
			</view>
			<tradingDayStatement :list="list"></tradingDayStatement>
		</mescroll-uni>

		<mx-date-picker :show="showPicker" type="date" format="yyyy-mm-dd" :end="today" :value="date" :show-tips="false"
			@confirm="confirmDate" @cancel="showPicker=false" />
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import tradingDayStatement from '@/subPage_fund/tradingDayStatement.vue'
	import dailyStatement from '@/subPage_fund/dailyStatement.vue'

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				list: [],
				pageNum: 1,
				pageSize: 10,
				downOption: {
					auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false,
					noMoreSize: 2, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据',
						//icon: '../../../../static/image/noorder.png',
						fixed: true,
						top: '400rpx',
					},
					textNoMore: '没有更多啦',
				},
				date: '',
				showPicker: false,
				today: this.$helper.getDay(2, '-'),
			}
		},
		computed: {
			cityPointInfo() {
				return this.$store.state.userInfo.cityPointInfo
			},
			amountInfo() {
				return this.$store.state.bankInfo
			}
		},
		mounted() {

		},
		methods: {
			goBank() {
				if (this.amountInfo.account) {
					uni.navigateTo({
						url: '/subPage_fund/bankAccountInfo'
					})
				} else {
					uni.navigateTo({
						url: '/subPage_fund/bankAccount'
					})
				}
			},
			selectDate(date) {
				this.date = date;
				this.showPicker = true;
			},
			confirmDate(e) {
				this.date = e.value;
				this.showPicker = false;
				this.mescroll.resetUpScroll()
			},
			load(paging) {
				this.pageNum = paging.num;
				this.getList();
			},
			refresh() {
				this.date = '';
				this.doSearch();
			},
			doSearch() {
				this.getAmount()
				this.mescroll.resetUpScroll()
			},
			async getList() {
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					cdpId: this.cityPointInfo.id,
					orders: [{
						asc: false,
						column: 'tradeDay'
					}, {
						asc: false,
						column: 'id'
					}],
					tradeDay: this.date
				}
				const data = await this.$api.post('/app/settlement-ledger/page', params, false)
				if (data.code === 200) {
					if (this.pageNum === 1) {
						this.list = [];
					}
					data.data.records.forEach(item => {
						const tradeDay = item.tradeDay;
						item.dateInfo =
							`${this.formartDate(item.tradeDateBegin)} ~ ${this.formartDate(item.tradeDateEnd)}`;
						item.date = tradeDay;
						// const objIndex = this.list.findIndex(row => row.date === tradeDay)
						// if (objIndex > -1) {
						// 	this.list[objIndex].children.push(item)
						// } else {
						// 	this.list.push({
						// 		dateInfo: item.dateInfo,
						// 		date: tradeDay,
						// 		expenses: item.expenses,
						// 		income: item.income,
						// 		children: [{
						// 			...item
						// 		}]
						// 	})
						// }
					})
					this.list = this.list.concat(data.data.records);
					this.mescroll.endByPage(data.data.records.length, data.data.pages);
				}
			},
			async getAmount() {
				const data = await this.$api.get('/app/citicbank-user/getInfoByCdpId', {
					cdpId: this.cityPointInfo.id
				}, false)
				if (data.code === 200) {
					//this.amountInfo = data.data;
					this.$store.commit('setBankInfo', data.data);
					//this.bankInfo = data.data.account;
				}
			},
			formartDate(date) {
				let month = date.substring(5, 7)
				let day = date.substring(8, 10)
				let hour = date.substring(11, 13)
				let minute = date.substring(14, 16)
				return `${month}.${day} ${hour}:${minute}`
			},
			withdraw() {
				if (!this.amountInfo.account) {
					uni.showModal({
						title: '提示',
						content: '当前没有绑定收款账户，是否立即去绑定？',
						success: (e) => {
							if (e.confirm) {
								uni.navigateTo({
									url: '/subPage_fund/bankAccount',
								})
							}
						}
					})
					return
				}
				if (!this.amountInfo.withdrawableAmount) {
					uni.showModal({
						title: '提示',
						content: '可提现金额为0，无法提现',
						showCancel: false
					})
					return
				}
				uni.navigateTo({
					url: '/subPage_fund/withdrawal?amount=' + this.amountInfo.withdrawableAmount
				})
			}
		},
		components: {
			tradingDayStatement,
			dailyStatement,
			MxDatePicker
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;

		.total-fund-wrapper {
			background-color: #383838;
			border-radius: 20upx;
			height: 360upx;
			color: #ffffff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 10upx 0;

			.bank-wrapper {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				box-sizing: border-box;
			}

			.fund {
				font-weight: bold;
				margin-top: 10upx;
			}

			.total-fund {
				text-align: center;
				margin-bottom: 50upx;

				.fund {
					font-size: 40upx;
				}
			}

			.fund-wrapper {
				width: 100%;
				display: flex;
				align-items: center;

				.item {
					flex: 1;
					text-align: center;

					.fund {
						font-size: 34upx;
					}

					&:first-child {
						border-right: 1upx solid rgba(255, 255, 255, .5);
					}

					.label {
						position: relative;
					}

					.withdraw {
						width: 100rpx;
						height: 46rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;
						background-color: #ffffff;
						margin-left: 20rpx;
						border-radius: 30rpx;
						color: #383838;
						position: absolute;
						right: 20rpx;
						top: 0;
					}
				}
			}
		}

		.tabs-wrapper {
			background-color: #ffffff;
			padding: 10upx 0;
			margin-bottom: 20upx;
		}

		.swiper {
			height: calc(100vh - 490upx);

			.nodata-wrapper {
				text-align: center;
				font-size: 32upx;
				color: #666666;

				.nodata-image {
					margin-top: 300upx;
					margin-bottom: 10upx;
					width: 246upx;
				}

				.loading-image {
					margin-top: 300upx;
					margin-bottom: 10upx;
					width: 296upx;
					height: 205upx;
				}
			}
		}
	}
</style>
